<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
    <%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
 <script>

$(document).ready(function(){
 
    $.ajax({
		url : './mock/clientpage',
		dataType: "json",
		contentType: 'application/json',			  
		  
		success : function(jsonData) {
		
			for(var a in jsonData){
			
				document.getElementById("userId").value="Client ID: "+jsonData[a]["userId"];
				document.getElementById("fname").value="Client Name: "+jsonData[a]["fname"];
				
			}
		}
	});
  })
</script> 
<script language="javascript" type="text/javascript">
function callDisplay(val){
	if (val == 1){
		
		document.getElementById("2").style.display = 'none';
		document.getElementById("3").style.display = 'none';
		document.getElementById("4").style.display = 'none';
		document.getElementById("5").style.display = 'none';
		document.getElementById("6").style.display = 'none';
		document.getElementById("1").style.display = 'block';	
		document.getElementById("div1").style.backgroundColor="#2B6DB6";
		document.getElementById("div2").style.backgroundColor="#83AFDF";
		document.getElementById("div3").style.backgroundColor="#83AFDF";
		document.getElementById("div4").style.backgroundColor="#83AFDF";
	}else if (val ==2 ){
		document.getElementById("1").style.display = 'none';
		document.getElementById("3").style.display = 'none';
		document.getElementById("4").style.display = 'none';
		document.getElementById("5").style.display = 'none';
		document.getElementById("6").style.display = 'none';
		document.getElementById("2").style.display = 'block';
		document.getElementById("div2").style.backgroundColor="#2B6DB6";
		document.getElementById("div1").style.backgroundColor="#83AFDF";
		document.getElementById("div3").style.backgroundColor="#83AFDF";
		document.getElementById("div4").style.backgroundColor="#83AFDF";

	}else if (val ==3 ){
		document.getElementById("2").style.display = 'none';
		document.getElementById("1").style.display = 'none';
		document.getElementById("4").style.display = 'none';
		document.getElementById("5").style.display = 'none';
		document.getElementById("6").style.display = 'none';
		document.getElementById("3").style.display = 'block';
		document.getElementById("div3").style.backgroundColor="#2B6DB6";
		document.getElementById("div2").style.backgroundColor="#83AFDF";
		document.getElementById("div1").style.backgroundColor="#83AFDF";
		document.getElementById("div4").style.backgroundColor="#83AFDF";
	}
	else if (val ==4){
		document.getElementById("2").style.display = 'none';
		document.getElementById("1").style.display = 'none';
		document.getElementById("3").style.display = 'none';
		document.getElementById("5").style.display = 'none';
		document.getElementById("6").style.display = 'none';
		document.getElementById("4").style.display = 'block';
		document.getElementById("div4").style.backgroundColor="#2B6DB6";
		document.getElementById("div2").style.backgroundColor="#83AFDF";
		document.getElementById("div3").style.backgroundColor="#83AFDF";
		document.getElementById("div1").style.backgroundColor="#83AFDF";
	}
	else if (val ==5 ){
		document.getElementById("2").style.display = 'none';
		document.getElementById("1").style.display = 'none';
		document.getElementById("3").style.display = 'none';
		document.getElementById("4").style.display = 'none';
		document.getElementById("6").style.display = 'none';
		document.getElementById("5").style.display = 'block';
	}
	else if (val ==6 ){
		document.getElementById("2").style.display = 'none';
		document.getElementById("1").style.display = 'none';
		document.getElementById("3").style.display = 'none';
		document.getElementById("4").style.display = 'none';
		document.getElementById("5").style.display = 'none';
		document.getElementById("6").style.display = 'block';
	}

}
</script>
</head>
<body>
<div id="footer">
            	<div id="footer_in">
                	<div id="msg-board">Message Board</div>
                    	<div id="msg-display-section">
                          <div class="footer-msg-container" style="overflow: scroll;overflow: auto;height:130px">
                              <div class="footer-msg-new">
                            	<div class="footer-msg-pad1">
                            <div class="footer-menu1" id="div1" onclick="callDisplay()">
                            <p><a href="#" onclick="callDisplay('1')"; title="" >Exchange Msg </a></p>
                            </div>
                            
                            <div class="footer-menu1" id="div2">
                            <p><a href="javascript: void(0);" onclick="callDisplay('2')"; title="">Order/Trade Msg</a></p>
                            </div>
                            
                            <div class="footer-menu1" id="div3">
                            <p><a href="#" onclick="callDisplay('3')"; title="">Price Alerts</a></p>
                            </div>
                            
                            <div class="footer-menu1" id="div4">
                            <p><a href="#" onclick="callDisplay('4')"; title="">Alert Msg</a></p>
                            </div>
                            
<div id="1" style="display:block; width:100%; float:left; min-height:102px;">
  <p>
  We endow you with professional websites developed in Html5, Java, WordPress, Joomla, .NET, Magento, 
  Drupal and other website designing technologies.</p>
  <p>Welcome <b><sec:authentication property="principal.username"/></b></p>
  
  </div>
<div id="2" style="display:none;  width:100%; float:left; min-height:102px;">
You can easily buy/sell from here.
<br/>
<label id="msg"></label>
<br/>
<label id="msgS"></label> </div>

<div id="3" style="display:none;  width:100%; float:left; min-height:102px;">
Prices of various symbols will not be same always.</div>
<div id="4" style="display:none;  width:100%; float:left; min-height:102px;">Showing alert message while trading. </div>
<div id="5" style="display:none;  width:100%; float:left;">&nbsp;</div>
<div id="6" style="display:none;  width:100%; float:left;">&nbsp;</div>                         
      </div>
                </div>
            </div>
            
            		<div class="footer-bottom">
                            	<div id="footer-bottom-menu">
                               <input type="text" size="69" value="Nepal Multi Exchange Commodity Private Limited" style="background:#8da4d4; margin-left:3px;color:#000;" disabled="disabled" />
                                <input type="text" size="15"  id="userId" value="Client ID" style="background:#8da4d4; margin-left:5px;color:#000;" disabled="disabled"/>
                                <input type="text" id="fname" value="Client Name" style="background:#8da4d4; margin-left:5px;color:#000;" disabled="disabled"/>
                                <input type="text" size="15" value="Membership ID" style="background:#8da4d4; margin-left:5px;color:#000;" disabled="disabled"/>
                                <input type="text" size="41" value="IP Address:<%=new java.util.Date()%>" style="background:#8da4d4; margin-left:5px;color:#000;" disabled="disabled"/>
                               
                                </div>
                            </div>
             		</div>
                </div>
             </div>
</body>
</html>